<template>
 <transition name="drop">
 	<div class="top-tip" v-show="showFlag" @click.stop="hide">
 		<slot></slot>
 	</div>
 </transition>
</template>

<script type="text/ecmascript-6">
   // import headDiv from './components/header'
export default{
  name:'',
  props:{
  	delay:{
  		type:Number,
  		default:1500
  	}
  },
  data(){
   return{
showFlag:false
  }
},
methods:{
show(){
	this.showFlag=true;
	clearTimeout(this.timer)
	this.timer=setTimeout(()=>{
		this.hide()
	},this.delay)

},
hide(){
	this.showFlag=false
}
},
  components:{}
}
</script>

<style rel="stylesheet" lang="less">
   .top-tip{
   	position: fixed;
   	top: 0;
   	width: 100%;
   	z-index: 4;
   	background-color: #666;
    &.drop-enter-active, &.drop-leave-active{
      transition: all 0.3s
    }
    &.drop-enter, &.drop-leave-to{
      transform: translate3d(0, -100%, 0)
    }
   }
</style>
